<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>Let's beat!</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<script>
		const mainurl="http://103.251.89.237:35345/";

		function add(){
			var username=document.getElementById("username").value;
			if (username == ""){
				alert("请输入用户名!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
				return;
			}
			var url=mainurl + "add/" + username;
			console.log(url);	
			$.get(url,function(data,status){
				console.log(data);
			}).fail(function(jqXHR,status,error){
				alert("服务器貌似抽风了QWQ");
			});
		}
	</script>
	<style>
		body{
			height: 100vh;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.size{
			font-size: 50px;
		}

		.center{
			text-align: center;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		#list-window {
			position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 200px;
      overflow-y: auto;
      border: 1px solid #ccc;
		}

		.flushbutton{
			position: absolute;
      top: 95%;
      left: 50%;
      transform: translate(-50%, -50%);
		}

		#list {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

		.list-item{
			padding: 10px;
			border-bottom: 1px solid #ddd;
		}
	</style>
	<body>
		<div class="center">
			<h1>这是一个积累功德的Website :)</h1>
			<h4>填一个用户名</h4>
			<input id="username">
			<h4>点击下面的按钮开始</h4>
			<button onclick="add();f"><span class="size">功德+1</span></button>
			<h1>功德榜</h1>
			<div id="list-window">
				<ul id="list"></ul>
			</div>
			<div class="flushbutton">
				<button onclick="flush();">刷新功德榜</button>
				<button onclick="flushpersecond();">保持刷新</button>
			</div>
		</div>
	</body>
	<script>
		const ListWindow=$("#list-window");
		const List=$("#list");
		var flushing=true;

		setInterval(function(){
			if (!flushing){
				return;
			}
			$.ajax({
				url:mainurl + "getall",
				method:"GET",
				success:function(data){
					List.html("");
					data.forEach(item => {
						const listItem=document.createElement("li");
						listItem.className="list-item";
						listItem.textContent=item;
						List.append(listItem);
					});
					console.log("get all of infos.")
				},
				error:function(jqXHR,status,error){
					//alert("当前无法获取功德榜");
					List.html("");
					const listItem=document.createElement("li");
					listItem.className="list-item";
					listItem.textContent="Null";
					List.append(listItem);
				}
			});
		},500);

		function flush(){
			List.empty();
			$.ajax({
				url:mainurl + "getall",
				method:"GET",
				success:function(data){
					data.forEach(item => {
						const listItem=document.createElement("li");
						listItem.className="list-item";
						listItem.textContent=item;
						List.append(listItem);
					});
					console.log("get all of infos.")
				},
				error:function(jqXHR,status,error){
					alert("当前无法获取功德榜");
					const listItem=document.createElement("li");
					listItem.className="list-item";
					listItem.textContent="Null";
					List.append(listItem);
				}
			});
		}
	
		function flushpersecond(){
			flushing=!flushing;
		}
	</script>
</html>